Css3 drop shadow generator

CSS3
{ S T U D I O }

You are you with CSS3
You can decorate your own website .
This site gives you the convenience to CSS3.
You can enjoy it
You can easily use more CSS3 .

CSS3로 당신은
자신의 웹 사이트를 꾸밀 수 있습니다.
이 사이트는 당신에게 CSS3에 대한 편의를 제공합니다.
당신은 그것을 즐길 수 있고
보다 CSS3를 쉽게 사용할 수 있습니다.

Box Shadow

You can use this tool to set the shadow style on a box element.

Code Download

Download the source file for your own style set. Download

Browser Support

The css attribute is a supported browser.

9.0+
4.0+
3.1+
4.0+
10.5+

CSS3 Preview

Preview

Style/Option

You can set your own style / options.

style

Specifies the location of the shadow.

drop
inner

distance-x

Specifies the value of the horizontal distance.

x-offset : px

distance-y

Specifies the value of the vertical distance.

y-offset : px

blur

Specifies the blurred value of the box.

blur : px

shadow

Specifies the shadow color and opacity value.

color :

opacity : %

background

Specifies the background color of the content.

color :

border

Specifies the color and thickness values for the border.

color :

width : px

CSS3 Code Preview

You can see the css code of your own style.
Copying the code and adding it to the desired element adds the style you set.

.css-box-shadow{

	/*start ------------*/
	width: [object Object]px; 
	height: [object Object]px; 
	background: #F8F8F8; 
	border: solid #BDBDBD 1px; 
	box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5)  ; 
	-webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5)  ; 
	-moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5)  ; 
}

download

CSS3{ S T U D I O }

Box Shadow

Code Download

Browser Support

CSS3 Preview

Style/Option

CSS3 Code Preview

CSS3
{ S T U D I O }